<template>
    <div class="searchinput">
        <div class="input">
            <input type="number" v-model="searchinfor"/>
            <button @click="search">搜索</button>
        </div>
        <div class="exhibition" v-if="friendinfor">
            <div class="userinfor">
                <div class="headimg">你好</div>
                <div class="infortext">
                    <div>{{friendinfor.name}}</div>
                    <div>{{friendinfor.callcode}}</div>
                </div>
            </div>
            <textarea v-model="addinfor"></textarea>
            <button @click="addfriend">加好友</button>
        </div>
    </div>
</template>

<script>
import { ref, shallowRef } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useStore } from 'vuex';

export default {
  name: 'Searchinput',
  setup() {
    const Store = useStore();
    const router = useRouter();
    // 搜索好友的电话号码
    const searchinfor = ref('');
    // 申请信息
    const addinfor = ref('');
    const friendinfor = shallowRef('');

    // 搜索好友
    function search() {
      const token = JSON.parse(window.sessionStorage.getItem('token'));
      axios({
        method: 'post',
        url: 'http://1.14.122.88:5001/my/searchuser',
        headers: { authorization: token },
        data: {
          callcode: searchinfor.value,
        },
      }).then(
        (response) => {
          if (response.data.status === 2) {
            friendinfor.value = response.data.friendinfor;
          }
          if (response.data.status === 1) {
            // eslint-disable-next-line
            window.alert(response.data.message);
          }
        },
        (error) => {
          console.log('请求失败', error.message);
        },
      );
      searchinfor.value = '';
    }

    // 发送加好友的申请
    function addfriend() {
      Store.state.basicinfor.socket.emit('addfriend', Store.state.basicinfor.userinfor.callcode, friendinfor.value.callcode, addinfor.value);
      addinfor.value = '';
      router.replace('/news');
    }
    return {
      searchinfor,
      addinfor,
      friendinfor,
      search,
      addfriend,
    };
  },
};
</script>

<style scoped>
    .searchinput{
        margin-top: 50px;
    }
    .input{
        display: flex;
        padding: 5px;
    }
    .input input{
        flex: 6;
        height: 30px;
        margin-right: 5px;
    }
    .input button{
        flex: 1;
        border-radius: 5px;
        border: none;
        background-color: #28c8ff;
    }
    .exhibition{
        padding: 10px;
    }
    .userinfor{
        display: flex;
        margin-bottom: 10px;
    }
    .headimg{
        width: 40px;
        height: 40px;
    }
    .exhibition textarea{
        width: 100%;
        height: 70px;
        margin-bottom: 10px;
        outline: none;
    }
    .exhibition button{
        border: none;
        border-radius: 5px;
        background-color: #28c8ff;
        height: 30px;
    }
</style>
